import type {RouteObject} from 'react-router';

import {lazy, Suspense} from 'react';
import {Outlet} from 'react-router-dom';
import {varAlpha} from 'minimal-shared/utils';

import Box from '@mui/material/Box';
import LinearProgress, {linearProgressClasses} from '@mui/material/LinearProgress';

import {AuthLayout} from 'src/layouts/auth';
import {DashboardLayout} from 'src/layouts/dashboard';

// ----------------------------------------------------------------------

export const DashboardPage = lazy(() => import('src/pages/dashboard'));
export const BlogPage = lazy(() => import('src/pages/blog'));
export const UserPage = lazy(() => import('src/pages/user'));
export const EnvironmentPage = lazy(() => import('src/pages/environment'));
export const SignInPage = lazy(() => import('src/pages/sign-in'));
export const ProductsPage = lazy(() => import('src/pages/products'));
export const Page404 = lazy(() => import('src/pages/page-not-found'));
export const ProductsInstallPage = lazy(() => import('src/pages/products-install-page'));


const renderFallback = () => (
    <Box
        sx={{
            display: 'flex',
            flex: '1 1 auto',
            alignItems: 'center',
            justifyContent: 'center',
        }}
    >
        <LinearProgress
            sx={{
                width: 1,
                maxWidth: 320,
                bgcolor: (theme) => varAlpha(theme.vars.palette.text.primaryChannel, 0.16),
                [`& .${linearProgressClasses.bar}`]: {bgcolor: 'text.primary'},
            }}
        />
    </Box>
);

export const routesSection: RouteObject[] = [
    {
        element: (
            <DashboardLayout>
                <Suspense fallback={renderFallback()}>
                    <Outlet/>
                </Suspense>
            </DashboardLayout>
        ),
        children: [
            {index: true, element: <DashboardPage/>},
            {path: 'environment', element: <EnvironmentPage/>},
            {path: 'user', element: <UserPage/>},
            {
                path: 'products', element: <ProductsPage/>,
                // children: [
                //     {path: 'install/:id', element: <ProductsInstallPage/>},
                // ]
            },
            {path: 'product/install/:id', element: <ProductsInstallPage/>},
            {path: 'blog', element: <BlogPage/>},
        ],
    },
    {
        path: 'sign-in',
        element: (
            <AuthLayout>
                <SignInPage/>
            </AuthLayout>
        ),
    },
    {
        path: '404',
        element: <Page404/>,
    },
    {path: '*', element: <Page404/>},
];
